<template>
 <!-- 合规处置 -->
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="学校">
        <el-select
          v-model="listQuery.fsiteNo"
          clearable
          filterable
          class="filter-item"
          placeholder="请选择所属学校"
        >
          <el-option
            v-for="item in fsiteNoBelongOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="空气项目">
        <el-select
          v-model="listQuery.fairitem"
          clearable
          filterable
          class="filter-item"
          placeholder="请选择空气项目"
        >
          <el-option
            v-for="item in sTsAiritemOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- v-permission="['scene:scenario:read']" -->
        <el-button
        round size="medium"
          class="filter-item"
         :style="{background:buttonColor.lookup,color:buttonColor.color}"
          icon="el-icon-search"
          @click="handleFilter"
          >查找</el-button
        >
        <!-- v-permission="['scene:scenario:create']" -->
        <el-button
        round size="medium"
          class="filter-item"
         :style="{background:buttonColor.add,color:buttonColor.color}"
          icon="el-icon-edit"
          @click="handleCreate"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--<el-select v-model="listQuery.fscenetype" clearable class="filter-item" placeholder="请选择场景类型">
        <el-option v-for="(key, value) in fscenetypeMap" :key="key" :label="key" :value="value"/>
      </el-select>-->

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :header-cell-style="tableColor"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="center" label="场景编号" prop="fsceneno" />
      <el-table-column align="center" label="场景名称" prop="fscenename" />
      <el-table-column
        :formatter="formatSite"
        align="center"
        label="所属学校"
        prop="fsiteNo"
      />
      <!--<el-table-column align="center" label="场景类型" prop="fscenetype">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.fscenetype | fscenetypeFilter }}</el-tag>
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="范围级别" prop="frange">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.frange | frangeFilter }}</el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column :formatter="formatFairitem" align="center" label="空气项目" prop="fairitem"/>
      <el-table-column align="center" label="符号" prop="fwhere" />
      <el-table-column align="center" label="空气值" prop="fvalue" />-->
      <!--<el-table-column align="center" label="执行日期" prop="fexecweekList" width="155">
        <template slot-scope="scope">
          <el-tag v-for="fexecweek in scope.row.fexecweekList" :key="fexecweek" type="primary" style="margin-right: 20px;"> {{ fexecweek | fexecweekFilter }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column :formatter="dateFormat" align="center" label="执行时间" prop="fexectime" />-->
      <el-table-column align="center" label="执行状态" prop="isExecuted" />

      <el-table-column
        align="center"
        width="210"
        label="操作"
        class-name="small-padding"
      >
        <template slot-scope="scope">
          <!-- v-permission="['scene:scenario:update']" -->
          <el-button :style="{background:buttonColor.edit,color:buttonColor.color}" round size="small" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <!-- v-permission="['scene:scenario:delete']" -->
          <el-button :style="{background:buttonColor.delete,color:buttonColor.color}" round size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <!-- v-permission="['scene:scenario:delete']" -->
          <el-button
            v-show="scope.row.isExecuted === '已执行'"
            type="primary"
            round size="warning"
            @click="resetScene0(scope.row)"
            >撤销</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      width="auto"
      top="0vh"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
    <template slot="title">
      <div :style="titleColor">{{textMap[dialogStatus]}}</div>
    </template>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属学校" prop="fsiteNo">
              <el-select
                v-model="dataForm.fsiteNo"
                :disabled="dialogStatus == 'update'"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fsiteNoBelongOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              class="el-form-item-small"
              label="范围级别"
              prop="frange"
            >
              <el-select
                v-model="dataForm.frange"
                class="filter-item"
                placeholder="请选择范围级别"
                @change="changeRange()"
              >
                <el-option
                  v-for="(key, value) in frangeMap"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="场景名称"
              prop="fscenename"
            >
              <el-input v-model="dataForm.fscenename" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              v-show="dataForm.fscenetype == 1"
              label="执行日期"
              prop="fexecweekList"
            >
              <el-select
                v-model="dataForm.fexecweekList"
                clearable
                multiple
                placeholder="请选择"
              >
                <el-option label="全选" @click.native="selectAll" />
                <el-option
                  v-for="(key, value) in fexecweekOptions"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              v-show="dataForm.fscenetype == 1"
              label="执行时间"
              prop="fexectime"
            >
              <el-time-picker
                v-model="dataForm.fexectime"
                type="datetime"
                placeholder="选择日期时间"
                format="HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!--<el-col :span="10">
            <el-form-item class="el-form-item-small" label="场景类型" prop="fscenetype" style="width: 250px">
              <el-select v-model="dataForm.fscenetype" :disabled="dialogStatus=='update'" class="filter-item" placeholder="请选择场景类型" @change="changeSceneType(dataForm.fscenetype)">
                <el-option v-for="(key, value) in fscenetypeMap" :key="key" :label="key" :value="value"/>
              </el-select>
            </el-form-item>
          </el-col>-->
          <!--<el-col :span="10" style="padding-left: 80px">
            <el-form-item v-show="dataForm.fscenetype==2" label="空气项目" prop="fairitem" style="width: 250px">
              <el-select v-model="dataForm.fairitem" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in sTsAiritemOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>-->
        </el-row>
        <!--<el-row>
          <el-col :span="6">
            <el-form-item v-show="dataForm.fscenetype==2" label="空气项目" prop="fairitem" style="width: 250px">
              <el-select v-model="dataForm.fairitem" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in sTsAiritemOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 70px">
            <el-form-item v-show="dataForm.fscenetype==2" prop="fwhere" style="width: 150px">
              &lt;!&ndash;<el-input v-model="dataForm.fwhere"/>&ndash;&gt;
              <el-select v-model="dataForm.fwhere" class="filter-item" placeholder="符号">
                <el-option v-for="(key, value) in symbolOptions" :key="key" :label="key" :value="value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-form-item v-show="dataForm.fscenetype==2" prop="fvalue" style="width: 150px">
              <el-input v-model="dataForm.fvalue"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            &lt;!&ndash;<el-form-item v-show="dataForm.fscenetype==2" label="空气项目" prop="fairitem" style="width: 250px">
              <el-select v-model="dataForm.fairitem" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in sTsAiritemOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>&ndash;&gt;
            <h3 v-show="dataForm.fscenetype==2" style="width: 250px; text-align: right">达标条件：</h3>
          </el-col>
          <el-col :span="6" style="padding-left: 70px">
            <el-form-item v-show="dataForm.fscenetype==2" prop="fwhere" style="width: 150px; padding-top: 5px">
              &lt;!&ndash;<el-input v-model="dataForm.fwhere"/>&ndash;&gt;
              <el-select v-model="dataForm.fwhere2" class="filter-item" placeholder="符号">
                <el-option v-for="(key, value) in symbolOptions" :key="key" :label="key" :value="value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <el-form-item v-show="dataForm.fscenetype==2" prop="fvalue2" style="width: 150px; padding-top: 5px">
              <el-input v-model="dataForm.fvalue2"/>
            </el-form-item>
          </el-col>
        </el-row>-->
      </el-form>
      <el-tabs type="border-card">
        <el-tab-pane label="空气项目列表">
          <div v-show="dataForm.fscenetype == 2" class="filter-container">
            <el-button
            round size="medium"
              class="filter-item"
              :style="{background:buttonColor.add,color:buttonColor.color}"
              icon="el-icon-edit"
              @click="handleUpdate4"
              >添加空气项目</el-button
            ><!--handleCreate-->
            <el-table
              v-loading="listLoading"
              :data="dataForm.sTcSceneItemList"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <!--<el-table-column :index="indexMethod" align="center" label="序" type="index"/>-->
              <el-table-column
                :formatter="formatFairitem"
                align="center"
                label="空气项目"
                prop="fairitem"
              />
              <!--<el-table-column align="center" label="空气项目" prop="fairitemname"/>-->
              <el-table-column align="center" label="超标条件" prop="fwhere" />
              <el-table-column align="center" label="超标值" prop="fvalue" />
              <el-table-column align="center" label="达标条件" prop="fwhere2" />
              <el-table-column align="center" label="达标值" prop="fvalue2" />
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                   :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round size="small"
                    @click="handleDelete4(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="超标设备列表">
          <div class="filter-container">
            <el-button
            round size="medium"
              class="filter-item"
              :style="{background:buttonColor.add,color:buttonColor.color}"
              icon="el-icon-edit"
              @click="handleUpdate1"
              >添加设备</el-button
            ><!--handleCreate-->
            <el-table
              v-loading="listLoading"
              :data="dataForm.sTsEquipmentList"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                align="center"
                label="设备"
                prop="feuipmentname"
              />
              <el-table-column
                align="center"
                label="指令"
                prop="finstructions"
              />
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round size="small"
                    @click="handleDelete1(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="达标设备列表">
          <div v-show="dataForm.fscenetype == 2" class="filter-container">
            <el-button
            round size="medium"
              class="filter-item"
             :style="{background:buttonColor.add,color:buttonColor.color}"
              icon="el-icon-edit"
              @click="handleUpdate3"
              >添加设备</el-button
            ><!--handleCreate-->
            <el-table
              v-loading="listLoading"
              :data="dataForm.sTsEquipmentList2"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                align="center"
                label="设备"
                prop="feuipmentname"
              />
              <el-table-column
                align="center"
                label="指令"
                prop="finstructions"
              />
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                   :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round size="small"
                    @click="handleDelete12(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="楼层列表">
          <div v-show="dataForm.frange == 1" class="filter-container">
            <el-button
            round size="medium"
              class="filter-item"
             :style="{background:buttonColor.add,color:buttonColor.color}"
              icon="el-icon-edit"
              @click="handleUpdate2(dataForm.fsiteNo)"
              >添加楼层</el-button
            >
            <el-table
              v-loading="listLoading"
              :data="dataForm.atsPoints"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                align="center"
                label="楼层名称"
                prop="fpointName"
              />
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round size="small"
                    @click="handleDelete2(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="教室列表">
          <div v-show="dataForm.frange == 2" class="filter-container">
            <el-button
            round size="medium"
              class="filter-item"
              :style="{background:buttonColor.add,color:buttonColor.color}"
              icon="el-icon-edit"
              @click="handleUpdate2(dataForm.fsiteNo)"
              >添加教室</el-button
            >
            <el-table
              v-loading="listLoading"
              :data="dataForm.atsPoints"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                align="center"
                label="教室名称"
                prop="fpointName"
              />
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round size="small"
                    @click="handleDelete2(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancelData">取消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
         :style="{background:buttonColor.confirm,color:buttonColor.color}"
          @click="createData"
          >确定</el-button
        >
        <el-button v-else :style="{background:buttonColor.confirm,color:buttonColor.colorone}" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible4"
      width="auto"
    >
    <template slot="title">
      <div :style="titleColor">{{textMap[dialogStatus]}}</div>
    </template>
      <el-form
        ref="sTcSceneItem"
        :rules="rules"
        :model="sTcSceneItem"
        status-icon
        label-position="left"
        label-width="auto"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="空气项目" prop="fairitem">
              <el-select
                v-model="sTcSceneItem.fairitem"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in sTsAiritemOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="fwhere">
              <!--<el-input v-model="sTcSceneItem.fwhere"/>-->
              <el-select
                v-model="sTcSceneItem.fwhere"
                class="filter-item"
                placeholder="符号"
              >
                <el-option
                  v-for="(key, value) in symbolOptions"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="fvalue" >
              <el-input v-model="sTcSceneItem.fvalue" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <h3 style="text-align: right">达标条件：</h3>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="fwhere">
              <!--<el-input v-model="sTcSceneItem.fwhere"/>-->
              <el-select
                v-model="sTcSceneItem.fwhere2"
                class="filter-item"
                placeholder="符号"
              >
                <el-option
                  v-for="(key, value) in symbolOptions"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="fvalue">
              <el-input v-model="sTcSceneItem.fvalue2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible4 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData4">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible1"
      width="auto"
    >
    <template slot="title">
      <div :style="titleColor">{{textMap[dialogStatus]}}</div>
    </template>
      <el-form
        ref="dataForm1"
        :rules="rules"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-form-item
          class="el-form-item-small"
          label="设备类型"
          prop="feuipmenttype"
        >
          <el-select
            v-model="feuipment"
            class="filter-item"
            placeholder="请选择设备类型"
            @change="getEqtActions(feuipment)"
          >
            <el-option
              v-for="item in sTsEquipmentDictOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="el-form-item-small"
          label="设备指令"
        >
          <el-select
            v-model="action"
            class="filter-item"
            placeholder="请选择设备指令"
          >
            <el-option
              v-for="item in eqtActionOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible1 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible3"
      width="auto"
    >
    <template slot="title">
      <div :style="titleColor">{{textMap[dialogStatus]}}</div>
    </template>
      <el-form
        ref="dataForm1"
        :rules="rules"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-form-item
          class="el-form-item-small"
          label="设备类型"
          prop="feuipmenttype"
        >
          <el-select
            v-model="feuipment"
            class="filter-item"
            placeholder="请选择设备类型"
            @change="getEqtActions(feuipment)"
          >
            <el-option
              v-for="item in sTsEquipmentDictOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="el-form-item-small"
          label="设备指令"
        >
          <el-select
            v-model="action"
            class="filter-item"
            placeholder="请选择设备指令"
          >
            <el-option
              v-for="item in eqtActionOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible3 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData3">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible2"
      width="auto"
    >
    <template slot="title">
      <div :style="titleColor">{{textMap[dialogStatus]}}</div>
    </template>
      <el-form
        ref="dataForm2"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-table
          ref="multipleTable"
          :data="atsPoints"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="fpointNo" label="教室编号" width="120" />
          <el-table-column
            prop="fpointName"
            label="教室名称"
            show-overflow-tooltip
          />
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible2 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData2">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  resetScene,
  eqtActions,
} from "@/api/scenario";
import {
  listsceneHead,
  createsceneHead,
  updatesceneHead,
  deletesceneHead
} from "@/api/sceneHead";
import { fsiteOptionsByLevel, sTsEquipmentDictOptions } from "@/api/area";
import {
  sTsAiritemOptions,
  listPointByFsiteNo,
  listPointByFsiteNo2,
} from "@/api/airAlarm";
import Pagination from "@/components/Pagination";
import moment from "moment/moment";
import { tableColor,titleColor,buttonColor } from "@/filters/index";

const fscenetypeMap = {
  1: "定时设定",
  2: "设备联动",
};

const frangeMap = {
  0: "学校",
  1: "楼层",
  2: "教室",
};

const symbolOptions = {
  ">=": ">=",
  "<=": "<=",
  ">": ">",
  "<": "<",
  "=": "=",
};

const fexecweekOptions = {
  1: "周一",
  2: "周二",
  3: "周三",
  4: "周四",
  5: "周五",
  6: "周六",
  7: "周日",
};

export default {
  name: "SceneHead",
  components: { Pagination },
  filters: {
    fscenetypeFilter(type) {
      return fscenetypeMap[type];
    },
    frangeFilter(type) {
      return frangeMap[type];
    },
    fexecweekFilter(type) {
      return fexecweekOptions[type];
    },
  },
  data() {
    return {
      buttonColor:buttonColor,
      listTmp: [],
      multipleSelection: [],
      multipleSelection2: [],
      multiple2: [],
      list: null,
      total: 0,
      fsiteNoBelongOptions: null,
      sTsAiritemOptions: [],
      sTsEquipmentListTmp: [],
      sTsEquipmentListTmp2: [],
      sTcSceneItemListTmp: [],
      atsPointsTmp: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fariname: undefined,
        sort: "create_time",
        order: "desc",
      },
      fscenetypeMap,
      frangeMap,
      symbolOptions,
      fexecweekOptions,
      dataForm: {
        fsceneno: undefined,
        fairitem: undefined,
        fscenetype: undefined,
        frange: undefined,
        fwhere: undefined,
        fwhere2: undefined,
        fvalue: undefined,
        fvalue2: undefined,
        isExecuted: undefined,
        fexectime: undefined,
        fscenename: undefined,
        fsiteNo: undefined,
        fpointNo: undefined,
        fteacherno: undefined,
        sTsEquipmentList: [],
        sTsEquipmentList2: [],
        atsPoints: [],
        sTcSceneItemList: [], // abc
        fexecweekList: [],
      },
      feuipment: "",
      sTcSceneItem: {
        fairitem: undefined,
        fwhere: undefined,
        fvalue: undefined,
        fwhere2: undefined,
        fvalue2: undefined,
      },
      action: null,
      sTsEquipmentDictOptions: [],
      eqtActionOptions: [],
      atsPoints: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible3: false,
      dialogFormVisible2: false,
      dialogFormVisible4: false,
      dialogStatus: "",
      dialogStatus1: "",
      dialogStatus2: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      tableColor: tableColor,
      titleColor: titleColor,
      rules: {
        fscenename: [
          { required: true, message: "场景名称不能为空", trigger: "blur" },
        ],
        fsiteNo: [
          { required: true, message: "所属学校不能为空", trigger: "blur" },
        ],
        fscenetype: [
          { required: true, message: "场景类型不能为空", trigger: "blur" },
        ],
        frange: [
          { required: true, message: "范围级别不能为空", trigger: "blur" },
        ],
      },
      permissionDialogFormVisible: false,
      systemPermissions: null,
      assignedPermissions: null,
      permissionForm: {
        roleId: undefined,
        permIds: [],
      },
    };
  },
  created() {
    this.getList();
    fsiteOptionsByLevel(3)
      .then((response) => {
        this.fsiteNoBelongOptions = response.data.data.list;
      })
      .catch(() => {
        this.fsiteNoBelongOptions = [];
      });
    sTsAiritemOptions()
      .then((response) => {
        // this.sTsAiritemOptions = response.data.data.list
        response.data.data.list.forEach((v) => {
          if (v.value.toString().substring(0, 1) === "2") {
            // 室内
            this.sTsAiritemOptions.push(v);
          }
        });
      })
      .catch(() => {
        this.sTsAiritemOptions = [];
      });
  },
  methods: {
    formatStatus: function (row, column) {
      return row.fsiteState === 1 ? "启用" : "禁用";
    },
    dateFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null || date === "") {
        return "";
      }
      return moment(date).format("HH:mm:ss");
    },
    formatSite: function (row, column) {
      for (let i = 0; i < this.fsiteNoBelongOptions.length; i++) {
        if (row.fsiteNo === this.fsiteNoBelongOptions[i].value) {
          return this.fsiteNoBelongOptions[i].label;
        }
      }
      return "";
    },
    formatFairitem: function (row, column) {
      for (let i = 0; i < this.sTsAiritemOptions.length; i++) {
        if (row.fairitem === this.sTsAiritemOptions[i].value) {
          return this.sTsAiritemOptions[i].label;
        }
      }
      return "";
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    getEqtActions(feuipment) {
      this.eqtActionOptions = [];
      this.action = "";
      eqtActions(feuipment.value)
        .then((response) => {
          this.eqtActionOptions = response.data.data.list;
        })
        .catch(() => {
          this.eqtActionOptions = [];
        });
    },
    addData() {
      this.dialogFormVisible1 = false;
      for (var i in this.dataForm.sTsEquipmentList) {
        var eqt = this.dataForm.sTsEquipmentList[i];
        if (
          eqt.feuipmentid === this.feuipment.value &&
          eqt.faction === this.action.value
        ) {
          return;
        }
      }
      this.dataForm.sTsEquipmentList.push({
        feuipmentid: this.feuipment.value,
        feuipmentname: this.feuipment.label,
        faction: this.action.value,
        finstructions: this.action.label,
      });
    },
    addData4() {
      this.dialogFormVisible4 = false;
      for (var i in this.dataForm.sTcSceneItemList) {
        var eqt = this.dataForm.sTcSceneItemList[i];
        if (eqt.fairitem === this.sTcSceneItem.fairitem.value) {
          return;
        }
      }
      debugger;
      this.dataForm.sTcSceneItemList.push({
        fairitem: this.sTcSceneItem.fairitem.value,
        fairitemname: this.sTcSceneItem.fairitem.label,
        fwhere: this.sTcSceneItem.fwhere,
        fwhere2: this.sTcSceneItem.fwhere2,
        fvalue: this.sTcSceneItem.fvalue,
        fvalue2: this.sTcSceneItem.fvalue2,
      });
    },
    addData3() {
      this.dialogFormVisible3 = false;
      for (var i in this.dataForm.sTsEquipmentList2) {
        var eqt = this.dataForm.sTsEquipmentList2[i];
        if (
          eqt.feuipmentid === this.feuipment.value &&
          eqt.faction === this.action.value
        ) {
          return;
        }
      }
      this.dataForm.sTsEquipmentList2.push({
        feuipmentid: this.feuipment.value,
        feuipmentname: this.feuipment.label,
        faction: this.action.value,
        finstructions: this.action.label,
      });
    },
    addData2() {
      this.dialogFormVisible2 = false;
      for (var i in this.multipleSelection2) {
        var atsPoint = this.multipleSelection2[i];
        var canAdd = true;
        for (var j in this.dataForm.atsPoints) {
          if (atsPoint.fpointNo === this.dataForm.atsPoints[j].fpointNo) {
            canAdd = false;
            break;
          }
        }
        if (canAdd) {
          atsPoint.fwarringno = this.dataForm.fwarringno;
          this.dataForm.atsPoints.push(atsPoint);
          this.multiple2.push(atsPoint);
        }
      }
    },
    cancelData() {
      this.list.forEach((v) => {
        if (v.fsceneno === this.dataForm.fsceneno) {
          this.dataForm = this.listTmp;
          this.dataForm.sTsEquipmentList = this.sTsEquipmentListTmp;
          this.dataForm.sTsEquipmentList2 = this.sTsEquipmentListTmp2;
          this.dataForm.sTcSceneItemList = this.sTcSceneItemListTmp;
          this.dataForm.atsPoints = this.atsPointsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          this.dialogFormVisible = false;
          return;
        }
      });
      this.dialogFormVisible = false;
    },
    // 弹窗点击关闭前的回调
    handleClose(){
       this.list.forEach((v) => {
        if (v.fsceneno === this.dataForm.fsceneno) {
          this.dataForm = this.listTmp;
          this.dataForm.sTsEquipmentList = this.sTsEquipmentListTmp;
          this.dataForm.sTsEquipmentList2 = this.sTsEquipmentListTmp2;
          this.dataForm.sTcSceneItemList = this.sTcSceneItemListTmp;
          this.dataForm.atsPoints = this.atsPointsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          this.dialogFormVisible = false;
          return;
        }
      });
      this.dialogFormVisible = false;
    },
    changeSceneType(fscenetype) {
      if (fscenetype === "1") {
        // 而不是fscenetype === 1
        this.dataForm.fexecweekList = [];
        this.dataForm.fairitem = null;
        this.dataForm.fwhere = null;
        this.dataForm.fvalue = null;
        this.dataForm.fwhere2 = null;
        this.dataForm.fvalue2 = null;
      } else if (fscenetype === "2") {
        // 触发
        this.dataForm.fexecweekList = ["1", "2", "3", "4", "5", "6", "7"];
        this.dataForm.fexectime = null;
      }
    },
    changeRange() {
      this.dataForm.atsPoints = [];
      this.multipleSelection2 = [];
    },
    formatDate(fexectime) {
      if (fexectime == null) {
        return null;
      } else {
        var strs = fexectime.split(" ");
        var dateStr =
          "Jan 01 " + strs[1] + ":" + strs[0] + ":00 CST 1970 GMT+0800";
        return new Date(dateStr);
      }
    },
    getList() {
      this.listLoading = true;
      this.listQuery.fscenetype = 2;
      listsceneHead(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.list.forEach((v) => {
            if (v.fscenetype === 1) {
              v.fexectime = this.formatDate(v.fexectime);
            }
          });
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        fsceneno: undefined,
        fscenename: undefined,
        fsiteNo: undefined,
        fairitem: undefined,
        fscenetype: undefined,
        frange: undefined,
        fwhere: undefined,
        fvalue: undefined,
        fwhere2: undefined,
        fvalue2: undefined,
        fexectime: undefined,
        fariname: undefined,
        fexecweekList: [],
        sTsEquipmentList: [],
        sTsEquipmentList2: [],
        sTcSceneItemList: [],
        // eqtActionOptions: [],
        atsPoints: [],
      };
    },
    resetForm2() {
      this.sTcSceneItem = {
        fairitem: undefined,
        fwhere: undefined,
        fvalue: undefined,
        fwhere2: undefined,
        fvalue2: undefined,
      };
    },
    handleCreate() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.dataForm.fscenetype = "2";
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (
            this.dataForm.fscenetype === "1" &&
            (this.dataForm.fexecweekList === undefined ||
              this.dataForm.fexecweekList.length === 0)
          ) {
            this.$notify.info({
              title: "失败",
              message: "执行日期至少选择一天",
            });
            return;
          }
          createsceneHead(this.dataForm)
            .then((response) => {
              response.data.data.fexectime = this.formatDate(
                response.data.data.fexectime
              );
              this.list.unshift(response.data.data);
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "成功",
                message: "添加预设场景成功",
              });
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.msg,
              });
            });
        }
      });
    },
    handleUpdate(row) {
      this.listTmp=row
      // abc
      this.dataForm = Object.assign({}, row);
      // this.dataForm.fscenetype = row.fscenetype.toString()
      this.dataForm.fscenetype = "2";
      this.dataForm.frange = row.frange.toString();
      // this.dataForm.sTsEquipmentListTmp = row.sTsEquipmentList
      // this.dataForm.atsPointsTmp = row.atsPoints
      this.sTsEquipmentListTmp = [];
      this.sTsEquipmentListTmp2 = [];
      this.sTcSceneItemListTmp = [];
      this.atsPointsTmp = [];
      row.sTsEquipmentList.forEach((v) => {
        this.sTsEquipmentListTmp.push(v);
      });
      row.sTsEquipmentList2.forEach((v) => {
        this.sTsEquipmentListTmp2.push(v);
      });
      row.sTcSceneItemList.forEach((v) => {
        this.sTcSceneItemListTmp.push(v);
      });
      row.atsPoints.forEach((v) => {
        this.atsPointsTmp.push(v);
      });
      // if (row.fscenetype === 2) {
      //   this.dataForm.fexecweekList = []
      // }
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleUpdate1() {
      sTsEquipmentDictOptions()
        .then((response) => {
          // this.sTsEquipmentDictOptions = response.data.data.list
          this.sTsEquipmentDictOptions = [];
          // var equipmentDict = []
          for (const equipmentDict of response.data.data.list) {
            if (equipmentDict.value !== 1 && equipmentDict.value !== 2) {
              // 非单插和三插
              this.sTsEquipmentDictOptions.push(equipmentDict);
            }
          }
        })
        .catch(() => {
          this.sTsEquipmentDictOptions = [];
        });
      this.dialogStatus1 = "update";
      this.dialogFormVisible1 = true;
      this.feuipment = "";
      this.eqtActionOptions = [];
      this.action = "";
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });
    },
    handleUpdate4() {
      this.resetForm2();
      this.dialogStatus1 = "update";
      this.dialogFormVisible4 = true;
      this.$nextTick(() => {
        this.$refs["sTcSceneItem"].clearValidate();
      });
    },
    handleUpdate3() {
      sTsEquipmentDictOptions()
        .then((response) => {
          // this.sTsEquipmentDictOptions = response.data.data.list
          this.sTsEquipmentDictOptions = [];
          // var equipmentDict = []
          for (const equipmentDict of response.data.data.list) {
            if (equipmentDict.value !== 1 && equipmentDict.value !== 2) {
              // 非单插和三插
              this.sTsEquipmentDictOptions.push(equipmentDict);
            }
          }
        })
        .catch(() => {
          this.sTsEquipmentDictOptions = [];
        });
      this.dialogStatus1 = "update";
      this.dialogFormVisible3 = true;
      this.feuipment = "";
      this.eqtActionOptions = [];
      this.action = "";
      this.$nextTick(() => {
        this.$refs["dataForm1"].clearValidate();
      });
    },
    handleUpdate2(fsiteNo) {
      if (fsiteNo == null) {
        this.$notify.info({
          title: "",
          message: "请先选择学校",
        });
        return;
      }
      if (this.dataForm.frange === "1") {
        listPointByFsiteNo2(fsiteNo)
          .then((response) => {
            this.atsPoints = response.data.data.list;
          })
          .catch(() => {
            this.atsPoints = [];
          });
      } else if (this.dataForm.frange === "2") {
        listPointByFsiteNo(fsiteNo)
          .then((response) => {
            this.atsPoints = response.data.data.list;
          })
          .catch(() => {
            this.atsPoints = [];
          });
      }
      this.dialogStatus2 = "update";
      this.dialogFormVisible2 = true;
      this.multipleSelection2 = [];
      this.$nextTick(() => {
        this.$refs["dataForm2"].clearValidate();
      });
    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (
            this.dataForm.fscenetype === "1" &&
            (this.dataForm.fexecweekList === undefined ||
              this.dataForm.fexecweekList.length === 0)
          ) {
            this.$notify.info({
              title: "失败",
              message: "执行日期至少选择一天",
            });
            return;
          }
          debugger;
          updatesceneHead(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fsceneno === this.dataForm.fsceneno) {
                  const index = this.list.indexOf(v);
                  this.list.splice(index, 1, this.dataForm);
                  break;
                }
              }
              this.dialogFormVisible = false;
              this.$notify.success({
                title: "成功",
                message: "更新场景设定成功",
              });
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.msg,
              });
            });
        }
      });
    },
    handleDelete(row) {
      this.$confirm("是否要删除该预设场景", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletesceneHead(row.fsceneno, row.fscenetype)
          .then((response) => {
            this.$notify.success({
              title: "成功",
              message: "删除预设场景成功",
            });
            const index = this.list.indexOf(row);
            this.list.splice(index, 1);
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.msg,
            });
          });
      });
    },
    resetScene0(row) {
      this.$confirm("是否要撤销场景执行状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        resetScene(row.fsceneno)
          .then((response) => {
            row.isExecuted = "";
            this.$notify.success({
              title: "成功",
              message: "撤销场景执行状态成功",
            });
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.msg,
            });
          });
      });
    },
    handleDelete1(row) {
      // this.dataForm.sTsEquipmentList.pop(row)
      for (var i = 0; i < this.dataForm.sTsEquipmentList.length; i++) {
        if (this.dataForm.sTsEquipmentList[i].fentryid === row.fentryid) {
          this.dataForm.sTsEquipmentList.splice(i, 1);
        }
      }
    },
    handleDelete4(row) {
      // this.dataForm.sTsEquipmentList.pop(row)
      for (var i = 0; i < this.dataForm.sTcSceneItemList.length; i++) {
        if (this.dataForm.sTcSceneItemList[i].fairitem === row.fairitem) {
          this.dataForm.sTcSceneItemList.splice(i, 1);
        }
      }
    },
    handleDelete12(row) {
      // this.dataForm.sTsEquipmentList.pop(row)
      for (var i = 0; i < this.dataForm.sTsEquipmentList2.length; i++) {
        if (this.dataForm.sTsEquipmentList2[i].fentryid === row.fentryid) {
          this.dataForm.sTsEquipmentList2.splice(i, 1);
        }
      }
    },
    handleDelete2(row) {
      this.dataForm.atsPoints.pop(row);
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
    selectAll() {
      if (this.dataForm.fexecweekList.length < 7) {
        this.dataForm.fexecweekList = [];
        for (var option in fexecweekOptions) {
          this.dataForm.fexecweekList.push(option);
        }
      } else {
        this.dataForm.fexecweekList = [];
      }
    },
  },
};
</script>
